<template>
    <div class="comfirm_infomation">
        <cjc-nav title="在线注册" @customRouter="customRouter"></cjc-nav>
        <div class="container">
            <!-- 提示信息 -->
            <ci-notice>{{configuration}}</ci-notice>
            <div class="step-container">
                <Timeline>
                    <TimelineItem v-for="(item, index) in items" :key="index" :color="'#' + item.COLOR">
                        <p>{{item.STEP_ORDER}}</p>
                        <ci-step-card
                            :info="item"
                            :infoList="item.infoList"
                            :title="item.TITLE" 
                            :statusText="item.STATUS_FINISH_NAME"
                            :color="'#' + item.COLOR" 
                            @trigger="trigger(index)"
                            :tips="item.TIPS"></ci-step-card>
                    </TimelineItem>
                </Timeline>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'comfirm_infomation',
    components: {
        CiNotice: () => import('@/components/CiNotice.vue'),
        CiStepCard: () => import('@/components/CiStepCard.vue')
    },
    data() {
        return {
        }
    },
    async created() {
        // 获取步骤列表数据
        await this.$store.dispatch('setRegisterInfo', this.$store.state.userInfo)
        if (this.items[this.items.length - 1].UT_STATUS === 1 && this.$route.params.formPage !== 'ele_register_form') {
            this.$router.replace({name: 'ele_register_form'})
        }
    },
    computed: {
        // 注册时间数据
        configuration() {
            const registInfo = this.$store.state.registInfo
            if (registInfo) {
                return registInfo.configuration
            } else {
                return '网上注册截止时间：获取中...'
            }
        },
        // 步骤一的数据
        items() {
            const registInfo = this.$store.state.registInfo
            if (registInfo) {
                let tempArray = []
                tempArray = registInfo.items.map((item) => {
                    // 过滤得到信息列表数据
                    let contentArray = []
                    Object.keys(item.CONTENT).forEach(key => {
                        let tempContentObj = {}
                        tempContentObj.key = key
                        tempContentObj.value = item.CONTENT[key]
                        contentArray.push(tempContentObj)
                    })
                    item.infoList = contentArray
                    // 按钮触发的函数名与参数获取
                    if (item.UT_STATUS === 0) {
                        item.triggerName = item.FUNCTION.split('_')[0]
                        item.triggerParams = item.FUNCTION.split('_')[1]
                    } else if (item.UT_STATUS === 1) {
                        item.triggerName = item.FINISH_FUNCTION.split('_')[0]
                        item.triggerParams = item.FINISH_FUNCTION.split('_')[1]
                    }
                    return item
                })
                return tempArray
            } else {
                return []
            }
        },
    },
    watch: {
        'items'() {
            for (let i = 0; i < this.items.length; i++) {
                let item = this.items[i]
                if (item.UT_STATUS === 0) {
                    this.$store.commit('SET_CurrentStepInformation', item)
                    break
                }
            }
        }
    },
    methods: {
        customRouter() {
            this.$cjc.closeWebView()
        },
        // 触发由接口传递过来的事件
        trigger(index) {
            let item = this.items[index]
            this[item.triggerName](item.triggerParams)
        },
        // 跳转到寝室列表页面
        jumpChooseDormitory() {
            this.$router.push({name: 'dorm_list'})
        },
        // 跳转到支付页面
        jumpPay() {
            this.confirm('10003')
            this.$store.commit('SET_registInfo', null)
            this.$store.dispatch('setRegisterInfo', this.$store.state.userInfo)
        },
        // 跳转到电子注册单页面
        jumpRegisterForm() {
            this.$store.commit('SET_registInfo', null)
            this.$router.push({name: 'ele_register_form'})
            const CurrentStepInformation = this.$store.state.CurrentStepInformation
            if (CurrentStepInformation) {
                this.confirm(CurrentStepInformation.STEP_ID)
            }
        },
        // 确认当前步骤
        confirm(stepId) {
            const msg = this.$Message.loading({
                content: '请稍等...',
                duration: 0
            })
            this.$store.dispatch('modifiedStep', {
                ksh: this.$store.state.userInfo.KSH,
                stepId,
                content: '',
                status: 1
            }).then(response => {
                if (response.data.status === 1000) {
                    this.$store.dispatch('setRegisterInfo', this.$store.state.userInfo)
                }
                msg()
            })
        }
    }
}
</script>

<style lang="less">
.comfirm_infomation {
    background-color: #fff;
    min-height: calc(~"100vh - 50px");
    .step-container {
        padding: 10px 20px;
    }
}
</style>
